<template>
	<view class="check">
		<u-sticky bgColor="#fff">
			<view class="m-x-30 p-y-20">
				<u--input placeholder="输入仪器名称，如介质损耗测定仪" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
					border="none" :clearable="true" v-model="form.name" @confirm="getTestList" @clear="onClear"></u--input>
				<u-tabs :list="tabList" @click="click" :activeStyle="{ color: '#3c9cff', fontWeight: 'bold' }"></u-tabs>
			</view>
		</u-sticky>
		<view class="card-list">
			<view v-for="(item, index) in list" :key="index" class="card-item" @click="onDetail(item)">
				<view class="p-x-14">
					<view class="name text-e">{{item.name}}</view>
					<view class="model text-e">型号规格:{{item.modelNumber}}</view>
				</view>
				<view class="info">
					<image :src="'/static/icons/primary.png'" style="width: 20rpx;height: 20rpx;margin: 0 8rpx;">
					</image>
					<text v-show="code == 'getOmList'">
						距离检测日期还剩{{item[`testDay`]||0}}天
					</text>
					<text v-show="code == 'getTestList'">
						当前设备正在送检中
					</text>
				</view>
			</view>
		</view>
		<view class="loadmore" v-if="list.length">
			<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" />
		</view>
		<!-- <u-gap height="10" bgColor="#f6f7f9"></u-gap> -->
		<u-empty v-if="!list.length" mode="list" icon="/static/null.png">
		</u-empty>
	</view>
</template>

<script>
	import SetTabBar from '@/mixins/SetTabBar.js'
	export default {
		mixins: [SetTabBar],
		onShow() {
			// #ifdef MP-WEIXIN
			this.setTabBarIndex(0);
			// #endif
			this.getTestList()
		},
		data() {
			return {
				// 记录code值
				code: 'getOmList',
				list: [],
				tabList: [{
						name: '待检测',
						code: 'getOmList',
					},
					{
						name: '送检中',
						code: 'getTestList',
					},
				],
				total: 0,
				form: {
					name: '',
					limit: 20,
					// order: 'asc', // 排序，asc／desc
					page: 1,
					// statusTest: 2,
					// 有值就是过滤寄出时间 没值就是全部
					test: 'test'
				},
			}
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.total > this.form.limit) {
				this.form.limit = this.form.limit + 10
				this.getTestList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.form.limit = 20
			this.getTestList()
		},
		// 微信小程序自定义导航栏退出按钮
		onUnload() {
			uni.switchTab({
				url: '/pages/works/works'
			})
		},
		methods: {
			// 清空仪器名称
			onClear() {
				this.form.name = ''
				this.getTestList()
			},
			// 获取列表 对`${type}Day`升序排列
			async getTestList() {
				this.status = 'loading';
				const {
					data
				} = await this.$api[this.code]({
					...this.form,
					orderField: this.code == 'getOmList' ? 'test_day' : 'test_date',
					order: this.code == 'getOmList' ? 'asc' : 'desc',
				})
				if (data) {
					this.total = data.total
					this.list = data.list.map(item => {
						if (item.instrumentsDTO) {
							item.checkId = item.id
							item = Object.assign(item, item.instrumentsDTO)
						}
						return item
					})
					this.status = this.total <= this.form.limit ? 'nomore' : 'loadmore';
				}
				uni.stopPullDownRefresh();
			},
			// 获取报警数量
			async getAlertNum() {
				const res = await this.$api.getAlertNum()
				if (res.data) {
					this.tabList.forEach(item => {
						if (res.data[item.code] && res.data[item.code] != 0) {
							item.badge = {
								value: res.data[item.code],
							}
						} else {
							item.badge = {}
						}
					})
				}
			},
			// 切换tab类型
			click(item) {
				this.code = item.code
				this.getTestList()
			},
			onDetail(item) {
				let url = `/pages/check/detail?id=${item.id}&code=${this.code}`
				if (item.checkId) {
					url = `/pages/check/detail?id=${item.id}&code=${this.code}&checkId=${item.checkId}`
				}
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.check {
		.u-input {
			background-color: #F7F8FA;
			height: 65rpx;
		}

		.u-empty {
			background-color: #f6f7f9;
		}
	}

	.card-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		background-color: #F7F8FA;
		margin-bottom: 100rpx;
		padding: 0 30rpx;
		margin: 20rpx 0;
	}

	.card-item {
		width: calc(50% - 20rpx);
		background-color: #fff;
		margin-top: 20rpx;
		padding-top: 10rpx;
		border-radius: 10rpx;
		border: 2rpx solid #0E64FE;
	}

	.info {
		font-size: 20rpx;
		color: #0E64FE;
		background-color: rgba(14, 100, 254, 0.1);
	}

	.electric {
		font-size: 18rpx;
		height: 20rpx;
	}

	.name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		padding: 10rpx 0;
	}

	.model {
		font-size: 26rpx;
		font-weight: 400;
		color: #59606A;
		padding: 20rpx 0;
	}
</style>